﻿@page
@{ Layout = "_Layout"; }

<el-tabs type="border-card">
  <el-tab-pane label="页面分享设置">

    <el-alert type="info">
      页面分享标签：<strong>&lt;stl:share&gt;&lt;/stl:share&gt;</strong>
    </el-alert>

    <div style="height: 10px"></div>

    <el-form size="small" ref="settingsForm" label-width="260px" status-icon :model="settingsForm">
      <el-form-item label="默认页面标题" prop="defaultTitle" :rules="{ required: true, message: '请输入默认页面标题' }">
        <el-input v-model="settingsForm.defaultTitle" placeholder="请输入默认页面标题"></el-input>
        <div class="tips">当分享插件未获取到页面标题时将使用默认页面标题</div>
      </el-form-item>
      <el-form-item label="默认封面图片" prop="defaultImageUrl" :rules="{ required: true, message: '请输入图片地址或点击上方按钮上传' }">
        <el-button-group>
          <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传图片', name: 'formLayerImageUpload', attributeName: 'defaultImageUrl', no: 0})">
            上传
          </el-button>
          <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择图片素材', name: 'materialLayerImageSelect', attributeName: 'defaultImageUrl', no: 0, full: true})">
            选择
          </el-button>
          <el-button size="mini" type="info" icon="el-icon-view" plain :disabled="settingsForm.defaultImageUrl ? false : true" v-on:click="btnPreviewClick('defaultImageUrl', 0)">
            预览
          </el-button>
        </el-button-group>
        <el-input
          v-model="settingsForm.defaultImageUrl"
          placeholder="请输入图片地址或点击上方按钮上传">
        </el-input>
        <div class="tips">当分享插件未获取到封面图片时将使用默认封面图片</div>
      </el-form-item>
      <el-form-item label="默认页面介绍" prop="defaultDescription" :rules="{ required: true, message: '请输入默认页面介绍' }">
        <el-input v-model="settingsForm.defaultDescription" type="textarea" :rows="5" placeholder="请输入默认页面介绍"></el-input>
        <div class="tips">当分享插件未获取到页面介绍时将使用默认页面介绍</div>
      </el-form-item>
    </el-form>

    <el-divider></el-divider>
    <div style="height: 10px"></div>

    <el-row>
      <el-col :span="24" align="center">
        <el-button type="primary" v-on:click="btnSettingsSubmitClick" size="small">保 存</el-button>
      </el-col>
    </el-row>
  </el-tab-pane>
  <el-tab-pane label="微信分享设置">

    <el-alert v-if="mpResult && mpResult.success" type="success" title="微信公众号设置保存成功！"></el-alert>
    <el-alert v-else-if="mpResult && !mpResult.success" type="error" :title="mpResult.errorMessage" ></el-alert>

    <div style="height: 10px"></div>

    <el-form size="small" ref="wxShareForm" label-width="260px" status-icon :model="wxShareForm">
      <el-form-item label="是否启用微信分享">
        <el-radio v-model="wxShareForm.isWxShare" :label="true">启用</el-radio>
        <el-radio v-model="wxShareForm.isWxShare" :label="false">不启用</el-radio>
        <div class="tips">启用微信分享后，微信转发或分享时将显示完整的标题、封面及介绍</div>
      </el-form-item>
      <el-form-item v-if="wxShareForm.isWxShare" label="AppId" prop="mpAppId" :rules="{ required: true, message: '请输入AppId' }">
        <el-input v-model="wxShareForm.mpAppId" placeholder="请输入AppId"></el-input>
        <div class="tips">请进入微信公众平台，获取AppId</div>
      </el-form-item>
      <el-form-item v-if="wxShareForm.isWxShare" label="AppSecret" prop="mpAppSecret" :rules="{ required: true, message: '请输入AppSecret' }">
        <el-input v-model="wxShareForm.mpAppSecret" placeholder="请输入AppSecret"></el-input>
        <div class="tips">请进入微信公众平台，获取AppSecret</div>
      </el-form-item>
    </el-form>

    <template v-if="wxShareForm.isWxShare">
      <div style="height: 10px"></div>
      <el-alert type="info">
        请进入微信公众平台，进入<strong>开发 -> 基本配置 -> IP白名单</strong>，将以下信息填入并启用。
      </el-alert>
      <div style="height: 10px"></div>

      <el-form size="small" label-width="260px" status-icon>
        <el-form-item label="IP白名单">
          {{ ipAddress }}
        </el-form-item>
      </el-form>
    </template>

    <el-divider></el-divider>
    <div style="height: 10px"></div>

    <el-row>
      <el-col :span="24" align="center">
        <el-button type="primary" v-on:click="btnWxShareSubmitClick" size="small">保 存</el-button>
      </el-col>
    </el-row>
  </el-tab-pane>
</el-tabs>

@section Scripts{
  <script src="/assets/share/index.js" type="text/javascript"></script>
}